/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */
import ProLayout, { DefaultFooter } from '@ant-design/pro-layout'
import { formatMessage } from 'umi-plugin-react/locale'
import React, { useEffect } from 'react'
import { Link } from 'umi'
import { connect } from 'dva'
import { GithubOutlined } from '@ant-design/icons'
import { Result, Button } from 'antd'
import { Authorized } from '@/utils/authority'
import RightContent from '@/components/GlobalHeader/RightContent'
import { isAntDesignPro, getAuthorityFromRouter } from '@/utils/utils'
import logo from '../assets/logo.svg'
import styles from './index.less'
// const formatMessage = 'none'
const noMatch = (
  <Result
    status="403"
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
)

/**
 * use Authorized check all menu item
 */
const menuDataRender = (menuList) =>
  menuList.map((item) => {
    const localItem = {
      ...item,
      children: item.children ? menuDataRender(item.children) : []
    }
    return Authorized.check(item.authority, localItem, null)
  })

const defaultFooterDom = (
  <DefaultFooter
    copyright="一个做特卖的商城系统"
    links={[
      {
        key: 'My blog',
        title: '我的主页',
        href: 'https://www.2048888.xyz/',
        blankTarget: true
      },
      {
        key: 'github',
        title: <GithubOutlined />,
        href: 'https://github.com/ant-design/ant-design-pro',
        blankTarget: true
      },
      {
        key: 'Ant Design',
        title: '后台管理',
        href: 'https://ant.design',
        blankTarget: true
      }
    ]}
  />
)

const footerRender = () => {
  if (!isAntDesignPro()) {
    return defaultFooterDom
  }

  return (
    <>
      {/* {defaultFooterDom} */}
      <div
        style={{
          padding: '0px 24px 24px',
          textAlign: 'center'
        }}
      >
        <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">
          <img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg" width="82px" alt="netlify logo" />
        </a>
      </div>
    </>
  )
}

const Layout = (props) => {
  const {
    dispatch,
    children,
    settings,
    location = {
      pathname: '/'
    }
  } = props
  /**
   * constructor
   */

  const handleMenuCollapse = (payload) => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload
      })
    }
  }

  const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || { authority: undefined }
  return (
    <ProLayout
      className={styles.myLayout}
      logo={logo}
      siderWidth={220}
      formatMessage={formatMessage}
      menuHeaderRender={(logoDom, titleDom) => (
        <Link to="/">
          {logoDom}
          {titleDom}
        </Link>
      )}
      onCollapse={handleMenuCollapse}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children || !menuItemProps.path) {
          return defaultDom
        }

        return <Link to={menuItemProps.path}>{defaultDom}</Link>
      }}
      // breadcrumbRender={(routers = []) => [
      //   {
      //     path: "/",
      //     breadcrumbName: "首页"
      //   },
      //   ...routers
      // ]}
      itemRender={(route, params, routes, paths) => {
        const first = routes.indexOf(route) === 0
        return first ? <Link to={paths.join('/')}>{route.breadcrumbName}</Link> : <span>{route.breadcrumbName}</span>
      }}
      footerRender={footerRender}
      menuDataRender={menuDataRender}
      rightContentRender={() => <RightContent />}
      {...props}
      {...settings}
    >
      <Authorized authority={authorized.authority} noMatch={noMatch}>
        {children}
      </Authorized>
    </ProLayout>
  )
}

export default connect(({ global, settings }) => ({
  collapsed: global.collapsed,
  settings
}))(Layout)
